<template>
  <div>
    <Card style="margin-bottom:20px;">
      <Form :model="superviseForm" ref="superviseForm" :rules="rules" style="display: block;">
        <Row gutter="40">
          <i-col span="6">
            <FormItem>
              <Select v-model="superviseForm.workStatus" placeholder="工作状态" clearable>
                <Option v-for="item in workStatusList" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <DatePicker v-model="superviseForm.workPlanRange" type="daterange" placeholder="工作计划时间段" :editable="false"
                style="width:100%" @on-change="changeWorkPlanRange"></DatePicker>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <DatePicker v-model="superviseForm.workEndRange" type="daterange" placeholder="工作完成时间段" :editable="false"
                style="width:100%" @on-change="changeWorkEndRange"></DatePicker>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <DatePicker v-model="superviseForm.PayableRange" type="daterange" placeholder="应交日时间段" :editable="false"
                style="width:100%" @on-change="changePayableRange"></DatePicker>
            </FormItem>
          </i-col>
        </Row>
        <Row gutter="40">
          <i-col span="6">
            <FormItem>
              <Select v-model="superviseForm.saleChannel" placeholder="销售渠道" clearable>
                <Option v-for="item in saleChannelList" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <Input placeholder="投保人姓名" v-model="superviseForm.appntName" />
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <Input placeholder="保单号" v-model="superviseForm.applyNo" />
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <Select v-model="superviseForm.applyStatus" placeholder="保单状态" clearable>
                <Option v-for="item in applyStatusList" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
            </FormItem>
          </i-col>
        </Row>
        <Row gutter="40">
          <i-col span="6">
            <FormItem>
              <Input placeholder="联系地址" v-model="superviseForm.postaladdress" />
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <DatePicker v-model="superviseForm.disableRange" type="daterange" placeholder="失效日时间段" :editable="false"
                style="width:100%" @on-change="changeDisableRange"></DatePicker>
            </FormItem>
          </i-col>
          <i-col span="6">
            <Row>
              <i-col span="11">
                <FormItem prop="minFee">
                  <Input placeholder="最低应收保费" v-model="superviseForm.minFee" type="number"
                    @on-blur="decimalConversion(superviseForm.minFee)" />
                </FormItem>
              </i-col>
              <i-col span="2" style="text-align:center;line-height:30px">-</i-col>
              <i-col span="11">
                <FormItem prop="maxFee">
                  <Input placeholder="最高应收保费" v-model="superviseForm.maxFee" type="number"
                    @on-blur="decimalConversion2(superviseForm.maxFee)" />
                </FormItem>
              </i-col>
            </Row>
          </i-col>
          <i-col span="6">
            <Row>
              <i-col span="11">
                <FormItem>
                  <Input placeholder="已交次数" v-model="superviseForm.payCount" />
                </FormItem>
              </i-col>
              <i-col span="2" style="text-align:center;line-height:30px">-</i-col>
              <i-col span="11">
                <FormItem>
                  <Select v-model="superviseForm.pay" clearable>
                    <Option v-for="item in payWayList" :key="item.key" :value="item.key">{{ item.value }}</Option>
                  </Select>
                </FormItem>
              </i-col>
            </Row>
          </i-col>
        </Row>
        <Row gutter="40">
          <i-col span="6">
            <FormItem>
              <DatePicker v-model="superviseForm.shouldPayRange" type="daterange" placeholder="工作录入时间段" :editable="false"
                style="width:100%" @on-change="changeShouldPayRange"></DatePicker>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <Button type="primary" @click="handleSubmit()" style="margin-right:20px" :loading="queryLoading">查询</Button>
          <Button @click="handleReset()">重置</Button>
        </Row>
      </Form>
    </Card>
    <Card>
      <div class="content">
        <Button :type="but[0]" @click="clickButton(0)">全部</Button>
        <Button :type="but[1]" @click="clickButton(1)">计划过期</Button>
        <span>
          <Button type="primary" @click="adjust">
            <Icon type="md-menu" />调整计划
          </Button>
        </span>
      </div>
      <Table :columns="chargeColumns" :data="chargeData" @on-selection-change="selectionChange"
        @on-sort-change="sortChange" :row-class-name="rowClassName">
        <template slot-scope="{row}" slot="planstatename">
          <span v-if="row.planstatename == '未服务'">
            <Button style="border-radius: 16px;background-color:rgb(255,141,26);color:#fff" size="small"
              @click="forward(row)">{{ row.planstatename }}</Button>
          </span>
          <span v-if="row.planstatename == '服务中'">
            <Button style="border-radius: 16px;background-color:rgb(24,144,255);color:#fff" size="small"
              @click="forward(row)">{{ row.planstatename }}</Button>
          </span>
          <span v-if="row.planstatename == '已完成'">
            <Button style="border-radius: 16px;background-color:rgb(67,207,124);color:#fff" size="small"
              @click="forward(row)">{{ row.planstatename }}</Button>
          </span>
        </template>
        <template slot-scope="{row}" slot="contstatename">
          <span v-if="row.contstatename == '失效中'" style="color: rgba(255, 141, 26, 1);">
            <span class="circle" style="background-color: rgba(255, 141, 26, 1);margin-right:5px"></span>
            {{ row.contstatename }}
          </span>
          <span v-if="row.contstatename == '终止'" style="color: rgba(166, 166, 166, 1);">
            <span class="circle" style="background-color: rgba(166, 166, 166, 1);margin-right:5px"></span>
            {{ row.contstatename }}
          </span>
          <span v-if="row.contstatename == '已复效'" style="color: rgba(67, 207, 124, 1);">
            <span class="circle" style="background-color: rgba(67, 207, 124, 1);margin-right:5px"></span>
            {{ row.contstatename }}
          </span>
        </template>
      </Table>
      <Page :total="total" show-sizer show-total style="text-align:right;margin-top:20px" @on-change="pageChange"
        @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeOptions" :current="pageIndex" :page-size="pageSize"
        transfer></Page>
    </Card>
    <Modal footer-hide="true" :value="adjustPlan" :mask-closable="false" @on-visible-change="modalVisibleChange"
      :styles="{ top: '250px' }" width="380">
      <span slot="header" style="color:#fff;font-size:16px">调整计划</span>
      <div class="adjustPlanContent">
        <Row gutter="80">
          <i-col span="15">
            <DatePicker placeholder="指定日期" :editable="false" v-model="adjustPlanForm.adjustPlanDate" style="width:100%">
            </DatePicker>
          </i-col>
          <i-col span="4">
            <Button type="primary" @click="adjustSubmit" :loading="adjustLoading">确认</Button>
          </i-col>
        </Row>
        <Select v-model="adjustPlanForm.workType" placeholder="请指定工作方式" clearable style="width:80%;margin-top:20px">
          <Option v-for="item in workTypeList" :key="item.key" :value="item.key">{{ item.value }}</Option>
        </Select>
      </div>
    </Modal>
    <div class="contain" ref="mybox">
      <canvas id="myCanvas" width="200" height="100" ref="myCanvas" style="position: absolute;"></canvas>
    </div>
  </div>
</template>

<script>
import util from "../../../util/util";
import { drawSign } from '../../../util/drawSign';
export default {
  props: {
    payWayList: {
      type: Array
    },
  },
  data() {
    const validatePremium = (rule, value, callback) => {
      if (value) {
        let reg = /^[0-9][0-9]*$/;
        let reg1 = /^(([0-9]{1}\d*)|(0{1}))(\.\d{1})$/;
        let reg2 = /^(([0-9]{1}\d*)|(0{1}))(\.\d{2})$/;
        if (reg.test(value)) {
          callback();
        } else if (reg1.test(value)) {
          callback();
        } else if (reg2.test(value)) {
          callback();
        } else {
          callback(new Error("请输入两位小数"));
        }
      } else {
        callback();
      }
      callback();
    };
    return {
      superviseForm: {
        workStatus: "",
        workPlanRange: ["", ""],
        workEndRange: ["", ""],
        PayableRange: ["", ""],
        saleChannel: "",
        appntName: "",
        applyNo: "",
        payCount: "",
        pay: "",
        applyStatus: "",
        minFee: "",
        maxFee: "",
        disableRange: ["", ""],
        postaladdress: "",
        shouldPayRange: ["", ""]
      },
      rules: {
        minFee: [{ validator: validatePremium, trigger: "blur" }],
        maxFee: [{ validator: validatePremium, trigger: "blur" }]
      },
      //本月交费完成
      monthPaid: "0",
      //工作状态下拉框
      workStatusList: [],
      //销售渠道下拉框
      saleChannelList: [],
      //年交
      payList: [],
      //表格
      chargeColumns: [
        {
          type: "selection",
          align: "center",
          fixed: "left",
          width: 60
        },
        {
          title: "计划编号",
          key: "planid",
          width: "200",
          fixed: "left"
        },
        {
          title: "保单号",
          key: "contno",
          width: "180",
          fixed: "left"
        },
        {
          title: "保单标志",
          key: "contflagname",
          width: "100",
          align: "center"
        },
        {
          title: "投保人",
          key: "appntname",
          align: "center",
          width: "130"
        },
        {
          title: "应交日",
          key: "paytodate",
          align: "center",
          width: "120",
          sortable: true,
          sortable: "custom"
        },
        {
          title: "已交次数",
          key: "payyear",
          align: "center",
          width: "100"
        },
        {
          title: "应收保费(元)",
          key: "paymoney",
          align: "center",
          width: "140",
          sortable: true,
          sortable: "custom"
        },
        {
          title: "失效日",
          key: "invaliddate",
          align: "center",
          width: "150"
        },
        {
          title: "保单状态",
          key: "contstatename",
          align: "center",
          width: "150",
          slot: "contstatename"
        },
        {
          title: "计划工作时间",
          key: "appointeddate",
          align: "center",
          width: "150"
        },
        {
          title: "工作完成时间",
          key: "fishdate",
          align: "center",
          width: "150"
        },
        {
          title: "计划工作方式",
          key: "worktypename",
          align: "center",
          minWidth: 140
        },
        {
          title: "工作状态",
          key: "planstatename",
          align: "center",
          width: "100",
          slot: "planstatename",
          fixed: "right"
        }
      ],
      chargeData: [],
      but: ["primary", "default"],
      // 对话框
      adjustPlan: false,
      adjustPlanForm: {
        adjustPlanDate: "",
        workType: ""
      },
      workTypeList: [],
      // 保单状态
      applyStatusList: [],
      selection: [],
      selectLength: 0,
      total: 0,
      pageSizeOptions: [5, 10, 15, 20],
      pageIndex: 1,
      pageSize: 10,
      pageObj: "",
      queryLoading: false,
      type: 0,
      premorder: 0,
      paytodateorder: 0,
      typeFlag: 0,
      flagIndex: -1,
      historyObj: null
    };
  },
  methods: {
    //行样式
    rowClassName(row, index) {
      if (index > 6) return 'table-row-red1';
      else return ''
      // if (row.facerecordflag == '0' && row.planstatename != "已完成") {
      //   return 'table-row-red1';
      // } else if (row.visitflag == '0' && row.planstatename != "已完成") {
      //   return 'table-row-orange1';
      // }
      // return '';
    },

    // 应交日时间段
    changePayableRange(date) {
      // console.log(date)
      this.superviseForm.PayableRange = date;
    },

    // 工作计划时间段
    changeWorkPlanRange(date) {
      // console.log(date)
      this.superviseForm.workPlanRange = date;
    },

    // 工作完成时间段
    changeWorkEndRange(date) {
      // console.log(date)
      this.superviseForm.workEndRange = date;
    },

    // 工作录入时间段
    changeShouldPayRange(date) {
      // console.log(date)
      this.superviseForm.shouldPayRange = date;
    },

    // 失效日时间段
    changeDisableRange(date) {
      // console.log(date)
      this.superviseForm.disableRange = date;
    },

    // 初始化头部和下拉框
    initial() {
      let obj = {
        index: 1,
        initflag: 0,
        pageSize: 10,
        selecttag: 0, // 0是查全部
        selecttype: 2,
        premorder: 0,
        paytodateorder: 0
      };
      this.api.getWorkListForInvalid(obj).then(res => {
        if (res.code == 200 && res.data != null) {
          if (res.data.basemap.branchtypes.length > 0) {
            this.saleChannelList = res.data.basemap.branchtypes;
          }
          if (res.data.basemap.contstates.length > 0) {
            this.applyStatusList = res.data.basemap.contstates;
          }
          if (res.data.basemap.payintvs.length > 0) {
            this.payList = res.data.basemap.payintvs;
          }
          if (res.data.basemap.planstates.length > 0) {
            this.workStatusList = res.data.basemap.planstates;
          }
          if (res.data.basemap.updateworktype) {
            this.workTypeList = res.data.basemap.updateworktype;
          }
        }
      });
      this.handleSubmit(-1, 999);
    },

    //表单---保单金额排序asc
    sortChange(column, key, order) {
      if (column.key == "paytodate") {
        this.premorder = 0;
        // 应交日
        if (column.order == "asc") {
          // 升序
          this.paytodateorder = 1;
        } else if (column.order == "desc") {
          // 降序
          this.paytodateorder = 2;
        } else {
          // 默认
          this.paytodateorder = 0;
        }
      }
      if (column.key == "paymoney") {
        this.paytodateorder = 0;
        // 应收保费
        if (column.order == "asc") {
          // 升序
          this.premorder = 1;
        } else if (column.order == "desc") {
          // 降序
          this.premorder = 2;
        } else {
          // 默认
          this.premorder = 0;
        }
      }
      // console.log(this.flagIndex)
      this.handleSubmit(this.flagIndex, 999);
      // console.log(column, key, order);
    },

    // 重置表单
    handleReset() {
      this.$refs.superviseForm.resetFields();
      this.superviseForm = {
        workStatus: "",
        workPlanRange: ["", ""],
        workEndRange: ["", ""],
        PayableRange: ["", ""],
        saleChannel: "",
        appntName: "",
        applyNo: "",
        payCount: "",
        pay: "",
        applyStatus: "",
        minFee: "",
        maxFee: "",
        disableRange: ["", ""],
        postaladdress: "",
        shouldPayRange: ["", ""]
      };
    },
    //转时间
    timeFormat(time) {
      if (!time) {
        return ''
      }
      let d = new Date(time)
      var y = d.getFullYear();
      var m = d.getMonth() + 1;
      if (m < 10) {
        m = "0" + m;
      }
      var day = d.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      return y + "-" + m + "-" + day;
    },

    // 查询
    handleSubmit(index, params) {
      console.log('123456');
      this.$refs.superviseForm.validate(valid => {
        if (valid) {
          if (this.historyObj == null) {
            if (index >= 0) {
              if (this.typeFlag == 0) {
                // console.log("----------默认查询：二次筛选---------["+this.flagIndex+']')
                this.type = 0;
              } else {
                // console.log("----------二次以上查询：二次筛选---------["+this.flagIndex+']')
                this.type = 1;
              }
            } else if (index == -1) {
              // console.log("----------默认查询---------")
              this.type = 0;
              this.typeFlag = 0;
              let arr = ["default", "default"];
              arr[0] = "primary";
              this.but = arr;
              this.flagIndex = 0;
            } else {
              // console.log("---------二次以上查询----------")
              this.type = 1;
              this.typeFlag = 1;
              let arr = ["default", "default"];
              arr[0] = "primary";
              this.but = arr;
              this.queryLoading = true;
              this.flagIndex = 0;
            }
            this.pageIndex = 1;
            this.pageSize = 10;
          }

          let obj = {
            planstate: this.superviseForm.workStatus
              ? this.superviseForm.workStatus
              : null,
            rangeminappointeddate: this.superviseForm.workPlanRange[0] ? this.timeFormat(this.superviseForm.workPlanRange[0]) : null,
            rangemaxappointeddate: this.superviseForm.workPlanRange[1] ? this.timeFormat(this.superviseForm.workPlanRange[1]) : null,
            rangeminfishdate: this.superviseForm.workEndRange[0] ? this.timeFormat(this.superviseForm.workEndRange[0]) : null,
            rangemaxfishdate: this.superviseForm.workEndRange[1] ? this.timeFormat(this.superviseForm.workEndRange[1]) : null,
            rangeminpaytodate: this.superviseForm.PayableRange[0] ? this.timeFormat(this.superviseForm.PayableRange[0]) : null,
            rangemaxpaytodate: this.superviseForm.PayableRange[1] ? this.timeFormat(this.superviseForm.PayableRange[1]) : null,
            rangeminControllerDate: this.superviseForm.shouldPayRange[0] ? this.timeFormat(this.superviseForm.shouldPayRange[0]) : null,
            rangemaxControllerDate: this.superviseForm.shouldPayRange[1] ? this.timeFormat(this.superviseForm.shouldPayRange[1]) : null,
            branchtype: this.superviseForm.saleChannel
              ? this.superviseForm.saleChannel
              : null,
            appntname: this.superviseForm.appntName
              ? this.superviseForm.appntName
              : null,
            contno: this.superviseForm.applyNo
              ? this.superviseForm.applyNo
              : null,
            contstate: this.superviseForm.applyStatus
              ? this.superviseForm.applyStatus
              : null,
            paycount: this.superviseForm.payCount
              ? this.superviseForm.payCount
              : null,
            payintv: this.superviseForm.pay ? this.superviseForm.pay : null,
            rangeminprem: this.superviseForm.minFee
              ? this.superviseForm.minFee
              : null,
            rangemaxprem: this.superviseForm.maxFee
              ? this.superviseForm.maxFee
              : null,
            rangemininvaliddate: this.superviseForm.disableRange[0] ? this.superviseForm.disableRange[0] : null,
            rangemaxinvaliddate: this.superviseForm.disableRange[1] ? this.superviseForm.disableRange[1] : null,
            index: this.pageIndex,
            initflag: 1,
            pageSize: this.pageSize,
            selecttag: this.flagIndex, // 0是查全部
            selecttype: 2, //失效件
            postaladdress: this.superviseForm.postaladdress
              ? this.superviseForm.postaladdress
              : null,
            initqueryflag: params == 999 ? 0 : null,
            type: this.type,
            premorder: this.premorder,
            paytodateorder: this.paytodateorder
          };
          this.pageObj = obj;
          this.api.getWorkListForInvalid(obj).then(res => {
            res.data = {
              "workbar": null,
              "basemap": {
                "planstates": [
                  {
                    "key": "0",
                    "value": "未服务",
                    "childern": null
                  },
                  {
                    "key": "1",
                    "value": "服务中",
                    "childern": null
                  },
                  {
                    "key": "2",
                    "value": "已完成",
                    "childern": null
                  }
                ],
                "branchtypes": [
                  {
                    "key": "1",
                    "value": "个险",
                    "childern": null
                  },
                  {
                    "key": "3",
                    "value": "银保",
                    "childern": null
                  },
                  {
                    "key": "4",
                    "value": "网销",
                    "childern": null
                  },
                  {
                    "key": "5",
                    "value": "经代",
                    "childern": null
                  }
                ],
                "payintvs": [
                  {
                    "key": "12",
                    "value": "年交",
                    "childern": null
                  }
                ],
                "ldcoms": null,
                "contstates": [
                  {
                    "key": "1",
                    "value": "失效中",
                    "childern": null
                  },
                  {
                    "key": "2",
                    "value": "终止",
                    "childern": null
                  },
                  {
                    "key": "3",
                    "value": "已复效",
                    "childern": null
                  }
                ],
                "updateworktype": [
                  {
                    "key": "0",
                    "value": "短信联系业务员",
                    "childern": null
                  },
                  {
                    "key": "1",
                    "value": "电话联系业务员",
                    "childern": null
                  },
                  {
                    "key": "2",
                    "value": "网络联系业务员",
                    "childern": null
                  },
                  {
                    "key": "3",
                    "value": "面访业务员",
                    "childern": null
                  },
                  {
                    "key": "4",
                    "value": "短信联系客户",
                    "childern": null
                  },
                  {
                    "key": "5",
                    "value": "电话联系客户",
                    "childern": null
                  },
                  {
                    "key": "6",
                    "value": "网络联系客户",
                    "childern": null
                  },
                  {
                    "key": "7",
                    "value": "面访客户",
                    "childern": null
                  }
                ]
              },
              "ipage": {
                "records": [
                  {
                    "planid": "1623201685613584385",
                    "contno": "0001968921741813",
                    "contflagname": "在职单",
                    "appntid": "0000947425",
                    "appntname": "周龙龟",
                    "paytodate": "2020-01-02 00:00:00",
                    "payyear": 1,
                    "payyears": 5,
                    "payintv": "12",
                    "payintvname": "年交",
                    "paymoney": 5000,
                    "invaliddate": "2020-03-03 00:00:00",
                    "contstate": "2",
                    "contstatename": "终止",
                    "appointeddate": "2023-02-08 00:00:00",
                    "fishdate": null,
                    "worktype": "0",
                    "worktypename": "短信联系业务员",
                    "planstate": "0",
                    "planstatename": "未服务",
                    "workid": "1623201685638750210",
                    "agentcode": "8601010114",
                    "agentcodename": "赵天天",
                    "visitflag": "0",
                    "facerecordflag": "0"
                  },
                  {
                    "planid": "1669247938046533633",
                    "contno": "0000584422601818",
                    "contflagname": "在职单",
                    "appntid": "0000952073",
                    "appntname": "年翠丝",
                    "paytodate": "2034-03-23 00:00:00",
                    "payyear": 12,
                    "payyears": 20,
                    "payintv": "12",
                    "payintvname": "年交",
                    "paymoney": 0,
                    "invaliddate": "2033-05-23 00:00:00",
                    "contstate": "2",
                    "contstatename": "终止",
                    "appointeddate": "2023-06-15 00:00:00",
                    "fishdate": null,
                    "worktype": "0",
                    "worktypename": "短信联系业务员",
                    "planstate": "0",
                    "planstatename": "未服务",
                    "workid": "1669247938063310849",
                    "agentcode": "8601010114",
                    "agentcodename": "赵天天",
                    "visitflag": "0",
                    "facerecordflag": "0"
                  },
                  {
                    "planid": "1669247879548575746",
                    "contno": "0000584422601818",
                    "contflagname": "在职单",
                    "appntid": "0000952073",
                    "appntname": "年翠丝",
                    "paytodate": "2034-03-23 00:00:00",
                    "payyear": 12,
                    "payyears": 20,
                    "payintv": "12",
                    "payintvname": "年交",
                    "paymoney": 0,
                    "invaliddate": "2033-05-23 00:00:00",
                    "contstate": "2",
                    "contstatename": "终止",
                    "appointeddate": "2023-06-15 00:00:00",
                    "fishdate": null,
                    "worktype": "0",
                    "worktypename": "短信联系业务员",
                    "planstate": "0",
                    "planstatename": "未服务",
                    "workid": "1669247879561158658",
                    "agentcode": "8601010114",
                    "agentcodename": "赵天天",
                    "visitflag": "0",
                    "facerecordflag": "0"
                  },
                  {
                    "planid": "1669240528389087233",
                    "contno": "0000668122661818",
                    "contflagname": "在职单",
                    "appntid": "0001040456",
                    "appntname": "刘冬冬",
                    "paytodate": "2023-03-20 00:00:00",
                    "payyear": 1,
                    "payyears": 3,
                    "payintv": "12",
                    "payintvname": "年交",
                    "paymoney": 29990000,
                    "invaliddate": "2023-05-20 00:00:00",
                    "contstate": "1",
                    "contstatename": "失效中",
                    "appointeddate": "2023-06-16 00:00:00",
                    "fishdate": null,
                    "worktype": "1",
                    "worktypename": "电话联系业务员",
                    "planstate": "0",
                    "planstatename": "未服务",
                    "workid": "1669240528401670146",
                    "agentcode": "8601010114",
                    "agentcodename": "赵天天",
                    "visitflag": "0",
                    "facerecordflag": "0"
                  },
                  {
                    "planid": "1669239717625929730",
                    "contno": "0000359423331555",
                    "contflagname": "在职单",
                    "appntid": "0001055039",
                    "appntname": "杨乐",
                    "paytodate": "2023-09-30 00:00:00",
                    "payyear": 4,
                    "payyears": 60,
                    "payintv": "1",
                    "payintvname": "月交",
                    "paymoney": 0,
                    "invaliddate": null,
                    "contstate": "2",
                    "contstatename": "终止",
                    "appointeddate": "2023-06-16 00:00:00",
                    "fishdate": null,
                    "worktype": "1",
                    "worktypename": "电话联系业务员",
                    "planstate": "0",
                    "planstatename": "未服务",
                    "workid": "1669239717638512641",
                    "agentcode": "DL002849",
                    "agentcodename": "测试四",
                    "visitflag": "0",
                    "facerecordflag": "0"
                  },
                  {
                    "planid": "1671344789109379073",
                    "contno": "0000353223111555",
                    "contflagname": "在职单",
                    "appntid": "0001051587",
                    "appntname": "慕容云海",
                    "paytodate": "2026-05-16 00:00:00",
                    "payyear": 36,
                    "payyears": 36,
                    "payintv": "1",
                    "payintvname": "月交",
                    "paymoney": 0,
                    "invaliddate": null,
                    "contstate": "2",
                    "contstatename": "终止",
                    "appointeddate": "2023-06-21 00:00:00",
                    "fishdate": null,
                    "worktype": "1",
                    "worktypename": "电话联系业务员",
                    "planstate": "0",
                    "planstatename": "未服务",
                    "workid": "1671344789121961985",
                    "agentcode": "DL002822",
                    "agentcodename": "陈易易",
                    "visitflag": "0",
                    "facerecordflag": "0"
                  },
                  {
                    "planid": "1233655882457522177",
                    "contno": "0002008217371888",
                    "contflagname": "在职单",
                    "appntid": "0000480780",
                    "appntname": "郭CC",
                    "paytodate": "2022-12-06 00:00:00",
                    "payyear": 2,
                    "payyears": 20,
                    "payintv": "12",
                    "payintvname": "年交",
                    "paymoney": 7195.2,
                    "invaliddate": "2020-01-30 00:00:00",
                    "contstate": "1",
                    "contstatename": "失效中",
                    "appointeddate": "2021-02-01 00:00:00",
                    "fishdate": "2022-05-25 00:00:00",
                    "worktype": "3",
                    "worktypename": "面访业务员",
                    "planstate": "1",
                    "planstatename": "服务中",
                    "workid": null,
                    "agentcode": "62001190",
                    "agentcodename": "付wb",
                    "visitflag": "1",
                    "facerecordflag": "0"
                  },
                  {
                    "planid": "1564855569021493249",
                    "contno": "0004500720861888",
                    "contflagname": "在职单",
                    "appntid": "0000873468",
                    "appntname": "聂三三",
                    "paytodate": "2022-12-31 00:00:00",
                    "payyear": 2,
                    "payyears": 5,
                    "payintv": "12",
                    "payintvname": "年交",
                    "paymoney": 202475.7,
                    "invaliddate": "2023-03-02 00:00:00",
                    "contstate": "1",
                    "contstatename": "失效中",
                    "appointeddate": "2022-10-13 00:00:00",
                    "fishdate": "2022-11-05 00:00:00",
                    "worktype": "0",
                    "worktypename": "短信联系业务员",
                    "planstate": "1",
                    "planstatename": "服务中",
                    "workid": null,
                    "agentcode": "61004088",
                    "agentcodename": "张婕",
                    "visitflag": "1",
                    "facerecordflag": "0"
                  },
                  {
                    "planid": "1589856403505389569",
                    "contno": "0000565521701818",
                    "contflagname": "在职单",
                    "appntid": "0000895045",
                    "appntname": "吴益",
                    "paytodate": "2024-12-10 00:00:00",
                    "payyear": 3,
                    "payyears": 3,
                    "payintv": "12",
                    "payintvname": "年交",
                    "paymoney": 0,
                    "invaliddate": "2024-02-09 00:00:00",
                    "contstate": "2",
                    "contstatename": "终止",
                    "appointeddate": "2022-11-25 00:00:00",
                    "fishdate": "2022-12-01 00:00:00",
                    "worktype": "1",
                    "worktypename": "电话联系业务员",
                    "planstate": "1",
                    "planstatename": "服务中",
                    "workid": null,
                    "agentcode": "8601010114",
                    "agentcodename": "赵天天",
                    "visitflag": "1",
                    "facerecordflag": "0"
                  },
                  {
                    "planid": "1623201717007949825",
                    "contno": "0005074821561888",
                    "contflagname": "在职单",
                    "appntid": "0000952126",
                    "appntname": "储八五",
                    "paytodate": "2022-12-11 00:00:00",
                    "payyear": 1,
                    "payyears": 5,
                    "payintv": "12",
                    "payintvname": "年交",
                    "paymoney": 0,
                    "invaliddate": null,
                    "contstate": "2",
                    "contstatename": "终止",
                    "appointeddate": "2023-02-08 00:00:00",
                    "fishdate": null,
                    "worktype": "0",
                    "worktypename": "短信联系业务员",
                    "planstate": "1",
                    "planstatename": "服务中",
                    "workid": "1623213421985013762",
                    "agentcode": "61003220",
                    "agentcodename": "朱宇晴",
                    "visitflag": "0",
                    "facerecordflag": "0"
                  }
                ],
                "total": "10",
                "size": "10",
                "current": "1",
                "orders": [],
                "searchCount": true,
                "pages": "1"
              }
            }
            if (res.code == 200 && res.data != null) {
              this.queryLoading = false;
              this.historyObj = null;
              if (res.data.ipage && res.data.ipage.total > 0) {
                this.total = res.data.ipage.total;
                this.chargeData = res.data.ipage.records;
                if (params != 999) {
                  this.$Message.info("查询成功");
                }
                this.chargeData.forEach(element => {
                  if (element.paytodate) {
                    element.paytodate = element.paytodate.substr(0, 10);
                  }
                  if (element.invaliddate) {
                    element.invaliddate = element.invaliddate.substr(0, 10);
                  }
                  if (element.appointeddate) {
                    element.appointeddate = element.appointeddate.substr(0, 10);
                  }
                  if (element.fishdate) {
                    element.fishdate = element.fishdate.substr(0, 10);
                  }
                  if (
                    element.payyear &&
                    element.payyears &&
                    element.payintvname
                  ) {
                    element.payyear =
                      element.payyear +
                      "/" +
                      element.payyears +
                      element.payintvname;
                  }
                  if (element.agentname && element.agentcode) {
                    element.agent = element.agentname + "-" + element.agentcode;
                  }
                });
              } else {
                this.total = 0;
                this.chargeData = [];
                if (params != 999) {
                  this.$Message.info("查询数据为空");
                }
              }
            } else {
              this.queryLoading = false;
              this.total = 0;
              this.chargeData = [];
              if (params != 999) {
                this.$Message.info(res.msg);
              }
            }
          });
        } else {
          this.$Message.error("信息填写有误");
        }
      });
    },

    // 查询
    pageSubmit() {
      this.pageObj.index = this.pageIndex;
      this.pageObj.pageSize = this.pageSize;
      this.api.getWorkListForInvalid(this.pageObj).then(res => {
        if (res.code == 200 && res.data != null) {
          if (res.data.ipage && res.data.ipage.total > 0) {
            this.total = res.data.ipage.total;
            this.chargeData = res.data.ipage.records;
            this.chargeData.forEach(element => {
              if (element.paytodate) {
                element.paytodate = element.paytodate.substr(0, 10);
              }
              if (element.payyear && element.payyears && element.payintvname) {
                element.payyear =
                  element.payyear +
                  "/" +
                  element.payyears +
                  element.payintvname;
              }
              if (element.appointeddate) {
                element.plandatetype = element.appointeddate.substr(0, 10);
              }
              if (element.agentname && element.agentcode) {
                element.agent = element.agentname + "-" + element.agentcode;
              }
            });
          } else {
            this.total = 0;
            this.chargeData = [];
            this.$Message.info("查询数据为空");
          }
        } else {
          this.total = 0;
          this.chargeData = [];
          this.$Message.info(res.msg);
        }
      });
    },

    //点击按钮变绿，其他default
    clickButton(index) {
      let arr = ["default", "default"];
      arr[index] = "primary";
      this.but = arr;
      if (index == 1) {
        index = 2;
      }
      this.flagIndex = index;
      this.handleSubmit(index, 999);
    },

    // 点击显示对话框
    adjust() {
      if (this.selectLength == 0) {
        this.$Message.error("未选择计划，不可进行此操作");
        return;
      }
      let i = 0;
      this.selection.some(function (element) {
        if (element.planstatename == "已完成") {
          return true;
        } else {
          i++;
        }
      });
      if (i === this.selection.length) {
        this.adjustPlan = true;
      } else {
        this.$Message.info("计划中不能包含已完成的计划");
      }
    },

    // 计划提交
    adjustSubmit() {
      this.adjustLoading = true;
      let index = 0;
      this.selection.forEach(element => {
        let obj = {
          appointeddate: util.dateToISOString(
            this.adjustPlanForm.adjustPlanDate
          ),
          worktype: this.adjustPlanForm.workType,
          planid: element.planid
        };
        this.api.updateplan(obj).then(res => {
          if (res.code == 200 && res.data != null) {
            index++;
            if (index == this.selection.length) {
              this.adjustLoading = false;
              this.$Message.success(res.msg);
              this.adjustPlanForm = {
                adjustPlanDate: "",
                workType: ""
              };
              this.handleSubmit(0, 999);
            }
          } else {
            index++;
            this.$Message.info(res.msg);
            if (index == this.selection.length) {
              this.adjustLoading = false;
              this.adjustPlanForm = {
                adjustPlanDate: "",
                workType: ""
              };
              this.handleSubmit(0, 999);
            }
          }
        });
      });
    },

    // 点击关闭隐藏对话框
    modalVisibleChange(whether) {
      if (whether == false) {
        this.adjustPlan = false;
        this.adjustPlanForm = {
          adjustPlanDate: "",
          workType: ""
        };
      }
    },

    // 表格多选获取数据
    selectionChange(selection) {
      this.selection = selection;
      this.selectLength = selection.length;
    },

    // 分页设置
    pageChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.pageSubmit();
    },
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageSubmit();
    },
    // 工作状态跳转
    forward(row) {
      sessionStorage.setItem("QUERYOBJ", JSON.stringify(this.pageObj));
      sessionStorage.setItem("QUERYFORM", JSON.stringify(this.superviseForm));
      sessionStorage.setItem("INSURANCE_TYPE", "失效件");
      if (row.planstatename == "已完成") {
        this.$router.push({
          name: "ServiceDetail",
          query: {
            row: row,
            insuranceType: "disabled"
          }
        });
      } else {
        this.$router.push({
          name: "ServiceDetail",
          query: {
            selection: row,
            insuranceType: "disabled"
          }
        });
      }
    },

    // 转化为两位小数
    decimalConversion(value) {
      let reg = /^[0-9][0-9]*$/;
      let reg1 = /^(([0-9]{1}\d*)|(0{1}))(\.\d{1})$/;
      let reg2 = /^(([0-9]{1}\d*)|(0{1}))(\.\d{2})$/;
      if (value) {
        if (reg.test(value)) {
          this.superviseForm.minFee = value + ".00";
        } else if (reg1.test(value)) {
          this.superviseForm.minFee = value + "0";
        } else if (reg2.test(value)) {
        } else {
          this.$refs.superviseForm.validateField("minFee");
        }
      } else {
        this.superviseForm.minFee = null;
      }
    },

    decimalConversion2(value) {
      let reg = /^[0-9][0-9]*$/;
      let reg1 = /^(([0-9]{1}\d*)|(0{1}))(\.\d{1})$/;
      let reg2 = /^(([0-9]{1}\d*)|(0{1}))(\.\d{2})$/;
      if (value) {
        if (reg.test(value)) {
          this.superviseForm.maxFee = value + ".00";
        } else if (reg1.test(value)) {
          this.superviseForm.maxFee = value + "0";
        } else if (reg2.test(value)) {
        } else {
          this.$refs.superviseForm.validateField("maxFee");
        }
      } else {
        this.superviseForm.maxFee = null;
      }
    },
    draw(ele, loginUser, loginTime) {
      let imageUrl = drawSign(ele, loginUser, loginTime)
      document.getElementsByClassName("ivu-table-fixed-body")[4].style.background = 'url(' + imageUrl + ') left top repeat'
      document.getElementsByClassName("ivu-table-fixed-body")[4].classList.add("add-background")

      document.getElementsByClassName("ivu-table-fixed-body")[5].style.background = 'url(' + imageUrl + ') left top repeat'
      document.getElementsByClassName("ivu-table-fixed-body")[5].classList.add("add-background")

      document.getElementsByClassName("ivu-table-body")[2].style.background = 'url(' + imageUrl + ') left top repeat'
      document.getElementsByClassName("ivu-table-body")[2].classList.add("add-background")
    },
  },
  created() {
    if (sessionStorage.getItem("INSURANCE_TYPE") == "失效件") {
      if (sessionStorage.getItem("QUERYOBJ")) {
        // 二次筛选条件
        this.historyObj = JSON.parse(sessionStorage.getItem("QUERYOBJ"));
        this.type = this.historyObj.type;
        this.typeFlag = this.historyObj.type;
        this.flagIndex = this.historyObj.selecttag;
        this.premorder = this.historyObj.premorder;
        this.paytodateorder = this.historyObj.paytodateorder;
        let arr = ["default", "default"];
        arr[this.flagIndex] = "primary";
        this.but = arr;
        this.pageIndex = this.historyObj.index;
        this.pageSize = this.historyObj.pageSize;

        // 单次查询条件
        this.superviseForm = JSON.parse(sessionStorage.getItem("QUERYFORM"));

        // 工作录入时间段
        this.superviseForm.shouldPayRange[0] = this.historyObj.rangeminControllerDate;
        this.superviseForm.shouldPayRange[1] = this.historyObj.rangemaxControllerDate;
        // 工作计划时间段
        this.superviseForm.workPlanRange[0] = this.historyObj.rangeminappointeddate;
        this.superviseForm.workPlanRange[1] = this.historyObj.rangemaxappointeddate;
        // 工作完成时间段
        this.superviseForm.workEndRange[0] = this.historyObj.rangeminfishdate;
        this.superviseForm.workEndRange[1] = this.historyObj.rangemaxfishdate;
        // 应交日时间段
        this.superviseForm.PayableRange[0] = this.historyObj.rangeminpaytodate;
        this.superviseForm.PayableRange[1] = this.historyObj.rangemaxpaytodate;
        // 失效日段
        this.superviseForm.disableRange[0] = this.historyObj.rangemininvaliddate;
        this.superviseForm.disableRange[1] = this.historyObj.rangemaxinvaliddate;
        // console.log(this.historyObj, this.superviseForm);

        sessionStorage.removeItem("QUERYOBJ");
        sessionStorage.removeItem("QUERYFORM");
        // sessionStorage.removeItem("INSURANCE_TYPE");
      }
    }
  },
  mounted() {
    // console.log(sessionStorage.removeItem("INSURANCE_TYPE"))
    this.initial();

    let loginUser = sessionStorage.getItem("name");
    let loginTime =
      new Date().getFullYear() +
      "/" +
      (new Date().getMonth() + 1) +
      "/" +
      (new Date().getDate());
    this.draw(this.$refs.myCanvas, loginUser, loginTime)
  },
  beforeDestroy() {
    this.chargeData = [];
  }
};
</script>
<style lang="less">
@import "./index";

.ivu-modal-header {
  background-color: #2d8cf0;
}

.ivu-modal-close .ivu-icon-ios-close {
  color: #fff !important;
}
</style>
